<template>
  <div class="app-container">
    <el-row style="padding-left: 80px" justify="space-between">
      <el-steps :active="active" align-center>
        <el-step title="联赛信息" style="width: 200px" />
        <el-step title="组委会信息" style="width: 200px" />
        <el-step title="独立联赛" style="width: 200px" />
      </el-steps>
    </el-row>
    <br />
    <el-card>
      <br />
      <br />
      <!--新建赛事-->
      <LeagueListAdd
        v-if="active == 0"
        @nextStep="nextStep"
        :id="id"
      ></LeagueListAdd>
      <!--组委会信息-->
      <LeagueListOc
        v-if="active == 1"
        @nextStep="nextStep"
        :id="id"
      ></LeagueListOc>
    </el-card>
  </div>
</template>

<script setup>
import LeagueListAdd from "@/views/match/list/LeagueAdd/league";
import LeagueListOc from "@/views/match/list/LeagueAdd/information";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const active = ref(0);
const id = ref(route.query.id);

// 下一步
function nextStep(ac, ic) {
  active.value = ac;
  id.value = ic;
}
</script>

<style scope></style>
